<?php

use yii\helpers\Url;
use yii\helpers\Html;
use website\helpers\Render;
use common\models\UserAccountChange;

$this->addCrumbs('资金管理');
$this->title = '资金明细';
?>

<div class="contenter">
    <?= $this->render('/user/navigator', ['active' => 'balance-change']) ?>

    <div id="user-contenter">
        <div class="box-shadow" id="sub-contenter">
            <div class="data-title"><span class="h3"><?= $this->title ?></span></div>
            <div class="mt-20px pb-20px">
                <div class="data-content search flyer-form pane" id="info-search">
                    <div class="form-item">
                        <div class="item-inline ml-10px">
                            <div class="input-title">交易日期：</div>
                            <div class="date-limit input-inline">
                                <div class="date-start"><input class="tabler flyer-date flyer-input" name="start" value="" placeholder="2017-01-01."></div>
                                <div class="date-end"><input class="tabler flyer-date flyer-input" name="end" value="" placeholder="2017-01-02."></div>
                            </div>
                        </div>
                        <div class="item-inline ml-20px">
                            <div class="input-title">交易类型：</div>
                            <div class="input-inline w-100px"><?= Render::select('type', UserAccountChange::$changeSelector, null, ['prompt' => '全部--', 'flyer' => 'select', 'class' => 'tabler']) ?></div>
                        </div>
                        <div class="item-inline">
                            <?= Render::select('status', UserAccountChange::$statusSelector, null, ['style' => 'display:none;']) ?>
                            <div class="input-inline bdn"><button class="flyer-button normal narrow border-round" id="search-button"><i class="icon-search"></i> <span>查 询</span></button></div>
                        </div>
                    </div>
                </div>
                <div class="flyer-table fat simple">
                    <table id="info-table" cellspacing="0" cellpadding="0">
                        <thead>
                        <tr>
                            <th class="first"><i class="icon-list-ol"></i> 时间</th>
                            <th><i class="icon-gear"></i> 操作类型</th>
                            <th><i class="icon-cny"></i> 操作金额</th>
                            <th><i class="icon-cny"></i> 操作后余额</th>
                            <th><i class="icon-bell-alt"></i> 状态</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr><td class="first" colspan="5"><i class="icon-search"></i> 点击查询按钮查找数据.</td></tr>
                        </tbody>
                    </table>
                </div>
                <div class="flyer-page mt right" id="info-page">
                    <div class="html mr-10px"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="<?= Render::static('art-template/template.js') ?>"></script>
<script src="<?= Render::static('flyer/flyer.class.js') ?>"></script>
<script src="<?= Render::static('flyer/checker.class.js') ?>"></script>
<script src="<?= Render::static('flyer/tabler.class.js') ?>"></script>
<script src="<?= Render::static('flyer/tableHandler.class.js') ?>"></script>
<script>
    $(document).ready(function() {
        (new flyer).init({ form: '.search' });
        // 初始化表格异步加载事件
        (new tabler).init({
            // 请求地址
            url: '<?= Url::to('@web/user/balance-change') ?>',
            // 数据渲染配置
            table: '#info-table', page: '#info-page', template: 'info-template', search: '#info-search', button: '#search-button',
            // 全选、反选按钮、页面加载完毕自动loading
            selectButton: '.select-all', reverseButton: '.reverse-all', readyCall: true,
            // param => tabler
            afterPost: function(param) {
                // 充值方式名称显示
                tableHandler.renderCategory({ category: $(param.tabler).find('.type'), select: 'type' });
                // 充值状态显示
                tableHandler.renderCategory({ category: $(param.tabler).find('.status'), select: 'status' });
            }
        });
    });
</script>
<script id="info-template" type="text/html">
    {{if infos != undefined && infos.length}}
    {{each infos as info key}}
    <tr id="tr-{{info.id}}" data-id="{{info.id}}">
        <td class="first">{{info.created_at | dateShow}}</td>
        <td class="type">{{info.type}}</td>
        <td>{{fmoney(info.amount / 100, 2)}}</td>
        <td>{{fmoney(info.after_change / 100, 2)}}</td>
        <td class="status">{{info.status}}</td>
    </tr>
    {{/each}}
    {{else}}
    <tr>
        <td class="first" colspan="5"><i class="icon-ban-circle"></i> 搜索程序未为您搜索到任何信息！</td>
    </tr>
    {{/if}}
</script>